<script>
import {mapActions, mapState} from "vuex"
import SafeBox from "@/components/SafeBox.vue"
import {getSafeAreaInsets} from "@/utils/safeAreaInsets"

export default {
  name: "Address",
  components: {SafeBox},
  created() {
    // 请求默认地址id
    this.getDefaultAddressId()

    // 请求地址列表
    this.getAddressList()
  },
  computed: {
    // 默认地址id
    ...mapState('address', ['defaultAddressId', 'addressList']),
  },
  methods: {
    getSafeAreaInsets,
    // 请求默认地址id 和 请求地址列表 和 修改默认地址id 和 删除地址 的方法
    ...mapActions('address', ['getDefaultAddressId', 'getAddressList', 'editDefaultAddress', 'removeAddress']),

    // 拼接省市区详细地址组成地址门牌号
    info_address(item) {
      return item.region.province + item.region.city + item.region.region + item.detail
    },

    // 删除收货地址
    onRemoveAddress(addressId) {
      uni.showModal({
        title: '温馨提示',
        content: '你确定要删除当前收货地址吗？',
        success: (res) => { // 用箭头函数，this指向外部作用域
          if (res.confirm) {
            this.removeAddress(addressId)
          }
        }
      })
    },

    // 修改默认地址id
    async onEditDefaultAddress(addressId) {
      // 如果选中的本来就是默认地址，那不需要修改，直接返回
      if (addressId === this.defaultAddressId) return

      await this.editDefaultAddress(addressId)

      uni.navigateBack()
    }
  }
}
</script>

<template>
  <div class="address">
    <van-nav-bar
        title="收货地址"
        left-arrow
        @click-left="uni.navigateBack"
        placeholder
    />


    <div v-if="addressList.length > 0" class="addressList">

      <van-radio-group :value="defaultAddressId">

        <div v-for="item in addressList" :key="item.address_id" class="item">

          <div class="info-content">
            <span class="name">{{ item.name }}</span>
            <span class="mobile">{{ item.phone }}</span>
          </div>

          <div class="info-address">
            {{ info_address(item) }}
          </div>

          <div class="line"></div>

          <div class="item-option">
            <van-radio
                @tap="onEditDefaultAddress(item.address_id)"
                class="left"
                :name="item.address_id"
                checked-color="#ee0a24"
            >
              {{ item.address_id === defaultAddressId ? '默认' : '选择' }}
            </van-radio>

            <div class="right">
              <div @click="uni.navigateTo({url: `/pagesAddress/pages/AddressEdit/AddressEdit?addressId=${item.address_id}`})"
                   class="edit">
                <van-icon name="edit">编辑</van-icon>
              </div>

              <!--调用删除地址的方法-->
              <div @click="onRemoveAddress(item.address_id)" class="del">
                <van-icon name="delete-o">删除</van-icon>
              </div>
            </div>
          </div>
        </div>
      </van-radio-group>
    </div>

    <div v-else class="empty" :style="{height: `calc(100vh - 46px - 16vw - ${getSafeAreaInsets()})`}">
      <image src="@/static/empty.png" alt=""/>
      <div class="tips">
        亲，暂无收货地址
      </div>
    </div>

    <SafeBox></SafeBox>

    <div class="footer-fixed">
      <view class="footer-container">
        <div @click="uni.navigateTo({url:'/pagesAddress/pages/AddAddress/AddAddress'})" class="btn">添加新地址</div>
      </view>

      <SafeBox></SafeBox>
    </div>

  </div>
</template>

<style lang="less">
.address {
  background-color: #fafafa;
  height: 100vh;
}

.addressList {
  padding-bottom: 60px;

  .item {
    padding: 15px 20px;
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 14px;

    .info-content {
      margin-bottom: 10px;

      .name {
        margin-right: 5px;
      }
    }

    .line {
      margin: 10px 0;
      border-bottom: 1px solid #efefef;
    }

    .item-option {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right {
        display: flex;
        color: #4c4c4c;

        .edit {
          margin-right: 15px;
        }
      }
    }
  }
}

.empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  image {
    width: 140px;
    height: 92px;
  }

  .tips {
    margin: 30px 0;
    color: #666;
  }
}

.footer-fixed {
  position: fixed;
  background-color: #fff;
  left: 0;
  bottom: 0;
  width: 100%;

  .footer-container {
    height: 60px;
    border-top: 1px solid #efefef;
    font-size: 14px;
    display: flex;
    padding: 10px 15px;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      background: linear-gradient(90deg, #f9211c, #ff6335);
      color: #fff;
      border-radius: 25px;
    }
  }
}
</style>
